<template>
  <div>
    <!-- 左侧菜单栏 -->
    <el-scrollbar :height="height + 'px'">
      <el-aside width="200px">
        <el-row class="tac">
          <el-col>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="$route.meta.parent || $route.path"
              router
              text-color="#fff"
              :collapse="!isCollapse"
            >
              <el-menu-item index="/home/mainpage">
                <el-icon> <house /> </el-icon><span>首页</span>
              </el-menu-item>
              <el-sub-menu
                v-for="(item, index) in mest"
                :key="index"
                :index="'/home/' + item.path"
              >
                <template #title>
                  <el-icon :class="'iconfont ' + item.meta.icon"></el-icon>
                  <span>{{ item.meta.title }}</span>
                </template>
                <div v-for="item2 in item.children" :key="item2.name">
                  <el-menu-item
                    v-if="!item2.meta.hidden"
                    :index="'/home/' + item.path + '/' + item2.path"
                  >
                    {{ item2.meta.title }}
                  </el-menu-item>
                </div>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
    </el-scrollbar>
  </div>
</template>

<script>
import { House } from "@element-plus/icons-vue";
import mest from "@/router/page";
export default {
  components: {
    House,
  },
  data() {
    return {
      height: 786,
    };
  },
  props: ["isCollapse"],
  mounted() {
    let that = this;
    this.height = window.innerHeight;
    window.onresize = () => {
      that.height = window.innerHeight;
    };
  },
  setup() {
    return {
      mest,
      House,
    };
  },
};
</script>

<style lang="less" scope>
.el-aside {
  width: auto;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    //去除白边
    border: 0px;
    .menu-top {
      margin-left: 30px;
    }
  }
}
</style>
